<template>
	<view class="u-count-down">
<!-- 		<header>
			<view class="nav-header">
				<span @click='back'><img src="../../static/返回.png" alt=""></span>
				<span v-if="kg==1">{{citytwo}}-{{city}}</span>
				<span v-else>{{city}}-{{citytwo}}</span>
			</view>
			<nav>
				<span>前一天</span>
				<span>{{date}}</span>
				<span>后一天</span>
			</nav>
		</header> -->
		<view class="main">
			<view class="main-moder" v-for="(item,index) in detaillList" :key="index" @click="()=>ticketDetails(item)">
				<view>
					<p>{{item.dates<10? '0'+item.dates:item.dates}}:{{item.datev<10? '0'+item.datev:item.datev}}</p>
					<p>{{item.dates1<10? '0'+item.dates1:item.dates1}}:{{item.datev1<10? '0'+item.datev1:item.datev1}}
					</p>
				</view>
				<view v-if="kg==1">
					<p><span>始</span>{{citytwo}}</p>
					<p><span>终</span>{{city}}</p>
				</view>
				<view v-else>
					<p><span>始</span>{{city}}</p>
					<p><span>终</span>{{citytwo}}</p>
				</view>
				<view>
					<p>G{{item.ceci}}</p>
					<p>{{item.hours<10? '0'+item.hours:item.hours}}时{{item.minute<10? '0'+item.minute:item.minute}}分</p>
				</view>
				<view>
					<p>￥{{item.money}}</p>
					<p>{{item.state}}</p>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				detaillList: [],
				city: '北京',
				citytwo: '上海',
				date: '',
				kg: 1,
				buttonController:1
			}
		},
		methods: {
			ticketDetails(item) {
				if(this.kg==1){
					item.city=this.citytwo
					item.citytwo=this.city
					item.date=this.date
					let str = JSON.stringify(item)
					let encryption = encodeURIComponent(str)
					uni.navigateTo({
						url: '/pages/Order filling/Order filling?obj=' + encryption,
					});
				}else{
					item.city=this.city
					item.citytwo=this.citytwo
					item.date=this.date
					let str = JSON.stringify(item)
					let encryption = encodeURIComponent(str)
					uni.navigateTo({
						url: '/pages/Order filling/Order filling?obj=' + encryption,
					});
				}
				if (item.state == '无票') {
					this.buttonController = 1
				} else if (item.state == '已停售') {
					this.buttonController = 2
				} else {
					this.buttonController = 3
				}
                let zuociindex=this.buttonController
				uni.setStorageSync('zuociindex',zuociindex)
			},
			back() {
				uni.navigateBack({
					delta: 2
				});
			},
			globalRandomness(type) {
				let _this = this;
				if (type == 1) {
					uni.request({
						url: 'http://localhost:8000/api/users',
						method: 'POST',
						success(res) {
							_this.detaillList = res.data.message.data
						}
					})

				} else {
					uni.request({
						url: 'http://localhost:8000/api/users',
						method: 'POST',
						success(res) {
							_this.detaillList = [..._this.detaillList,...res.data.message.data]
						}
					})
				}
			}
		},
		onLoad(option) {
			let arr = option.obj.split(',')
			this.city = arr[0];
			this.citytwo = arr[1]
			this.date = arr[2]
			this.kg = arr[3] * 1

		},
		onPullDownRefresh() {
			setTimeout(()=>{
				this.globalRandomness(1)
				uni.showToast({
					title:'刷新成功',
				})
			},2000)

		},
		onReachBottom() {
			this.globalRandomness(2)
		},
		mounted() {
			this.globalRandomness(1)
		}
	}
</script>

<style scoped lang="scss">
	nav {
		width: 100vw;
		height: 6vh;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #1BA9BA;
		box-shadow: 0rpx 30rpx 20rpx -30rpx #ccc;
	}

	.main {
		width: 100vw;
		height: 82vh;

		.main-moder {
			margin: 10rpx 0;
			height: 120rpx;
			background-color: #fcfcfc;

			view {
				float: left;
				width: 180rpx;
				margin: 4rpx 0 4rpx 4rpx;
			}

			view:nth-child(4) {
				text-align: right;
				color: #ffca0a;
			}

			view:nth-child(1) {
				margin-left: 4rpx;
			}

			view:nth-child(2) {
				p {
					display: flex;
					align-items: center;

					span {
						display: inline-block;
						width: 26rpx;
						height: 26rpx;
						border-radius: 50%;
						border: 2rpx solid #1BA9BA;
						color: #1BA9BA;
						font-size: 24rpx;
						line-height: 25rpx;
						text-align: center;
					}
				}
			}
		}

	}

	.nav-header {
		width: 100vw;
		height: 10vh;
		background-color: #1BA9BA;
		display: flex;
		align-items: center;
		padding-top: 19rpx;

		span:nth-child(1) {
			color: #fff;
			margin-left: 20rpx;
		}

		span:nth-child(2) {
			margin-top: -10rpx;
			color: #fff;
			font-weight: 800;
			margin-left: 234rpx;
		}

		img {
			width: 45rpx;
			height: 45rpx;
		}
	}
</style>